import {useEffect, useState} from 'react';
// @ts-ignore
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendPlain';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markPoint';
import {queryIncomePieData} from "@/pages/m/Analyse/service";

export type IncomeTypeBarItem = {
  name: string;
  value: number;
}
const IncomeTypeBarChart = (props: {year: string}) => {

  // 图表数据源
  const [data, setData] = useState<IncomeTypeBarItem[]>([])
  useEffect(() => {
    queryIncomePieData({year: props.year}).then((res)=>{
      if (res.status === "done"){
        // 获取成功
        setData(res.data)
      }
    })
  }, [props.year]);

  // 图表参数
  const [main, setMain] = useState("")
  const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {},
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     // magicType: { show: true, type: ['line', 'bar'] },
      //     // restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: data?.map(item => (item.name))
      },
      series: [
        {
          name: props.year,
          // type: 'pie',
          type: 'bar',
          data: data?.map(item=>(item.value)),
        }
      ]
  }
  useEffect(() => {
    const node = document.getElementById("thisYear_Bar_chart_1")
    // @ts-ignore
    setMain(node)
  }, [main]);
  if (main !== ""){
    const myChart = echarts.init(main);
    myChart.setOption(option)
  }
  return (
    <div style={{width: `100%`, height: 300}} id={"thisYear_Bar_chart_1"}/>
  )
}
export default IncomeTypeBarChart;
